<template>
	<view class="">
		<text
			v-for="star in 5"
			class="star"
			:class="currScore >= star ? 'cuIcon-favorfill' : 'cuIcon-favor'"
			@click="score(star)"
		></text>
	</view>
</template>

<script setup lang="ts">
import { onMounted, Ref, ref } from "vue"

const props = defineProps({
	maxScore: {
		type: Number,
		default: 5
	},
	score: {
		type: Number,
		default: 0
	},
	disabled: {
		type: Boolean,
		default: false
	}
})
const emit = defineEmits(["update:score"])
const currScore: Ref<number> = ref(0)
const score = (star: number) => {
	if (props.disabled) return
	currScore.value = star
	emit("update:score", star)
}

onMounted(() => {
	currScore.value = props.score
	console.log(currScore.value)
})
</script>

<style lang="stylus" scoped>
.star
	font-size 60rpx
	color: #ffe252
.star:not(:last-child)
	padding-right 14rpx
</style>